<template>
  <div class="order-management">
    <el-button type="primary" @click="exportOrders">导出订单报表</el-button>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="订单ID" />
      <el-table-column prop="customerName" label="客户姓名" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="editOrder(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteOrder(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const store = useStore();
const orders = ref([]);

onMounted(() => {
  fetchOrders();
});

const fetchOrders = () => {
  return store.dispatch('fetchOrders')
    .then(() => {
      ElMessage.success('订单列表已更新');
    })
    .catch(() => {
      ElMessage.error('获取订单列表失败');
    });
};

const exportOrders = () => {
  store.dispatch('exportOrders').then(() => {
    ElMessage.success('订单报表导出成功');
  }).catch(() => {
    ElMessage.error('导出订单报表失败');
  });
};

const editOrder = (order) => {
  console.log('编辑订单:', order);
};

const deleteOrder = (orderId) => {
  store.dispatch('deleteOrder', orderId).then(() => {
    ElMessage.success('订单删除成功');
    fetchOrders(); // 刷新订单列表
  }).catch(() => {
    ElMessage.error('删除订单失败');
  });
};
</script>

<style scoped>
.order-management {
  padding: 20px;
}
</style>